<template>
  <Header></Header>
  <van-skeleton title avatar :row="3" :loading="loading">
    <div class="datail-content">
      <div class="header-content">
        <div class="title">{{ state.data['title'] }}</div>
        <div class="container">
          <img :src=state.userdata.avatar alt="头像" class="avatar">
          <span class="username">{{ state.userdata.nickname }}</span>
        </div>
        <div class="article-content" v-html="state.data['article']"></div>
        <div class="publish-time">发布时间：{{ state.data['c_time'] }}</div>
      </div>
      <div class="footer">
        <Statement :method="1"></Statement>
        <Comment></Comment>
      </div>
    </div>
  </van-skeleton>
</template>

<script setup>
import { useRoute } from 'vue-router';
import axios from '@/api/index.js'
import { onMounted } from 'vue';
import Header from '@/components/Header.vue';
import { reactive,ref } from 'vue';
import Comment from '@/components/Comment.vue'
import Statement  from '@/components/Statement.vue'

const route = useRoute()
// console.log(route.query.id);
const loading = ref(true);
const state = reactive({
  data: '',
  userdata: ''
})

onMounted(async () => {


  // 查找博客内容
  const result = await axios.post('/blog/findBlogDetail', {
    id: route.query.id
  })
  // console.log(result.data);
  state.data = result.data[0]

  const result1 = await axios.post('/blog/idFindUserData', {
    id: state.data['userid']
  })

  state.userdata = result1.data[0]
  // console.log(result1.data[0]);
  loading.value = false;
})

</script>

<style lang="less" scoped>
.datail-content {
  height: 100vh;
  padding: 0 5px;

  .container {
    margin-top: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    border: 1px solid #999;
  }

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .username {
    font-size: 16px;
    font-weight: bold;
  }

  .article-content {
    font-size: 16px;
  }

  .publish-time {
    font-size: 14px;
    color: #999;
    margin-top: 10px;
  }

}
</style>
